<template>
  <div id="views">
    <div class="topBg"></div>
    <div class="content">
      <p class="machineName">
        <img src="../../common/imgs/danwa.png" alt="" v-if="Number(machine.bhp_power) <= 0" class="middle">
        <img src="../../common/imgs/shuangwa.png" alt="" v-if="Number(machine.bhp_power) > 0" class="middle">
        <span class="middle">{{machine.name}}</span>
      </p>
      <section id="sec1">
        <p class="allType">
<!--          <img src="../../common/imgs/not_return.png" alt="">-->
          <span>合约期<span v-if="machine">{{machine.constract_date_num}}</span>天</span>
          <span v-if="machine && machine.type == 11 ">不包电费</span>
        </p>
        <div class="sec1_content">
          <p>
            <span>单份金额</span>
            <span>
              <span>
                {{cnyPrice}}<span>CNY</span> / {{usdtPrice}}<span>USDT</span>
              </span>
            </span>
          </p>
          <p>
            <span>单份BTC算力</span>
            <span>
              <span v-if="machine">{{Number(machine.base_power)}}{{machine.unit_name}}</span>
            </span>
          </p>
          <p v-if="machine.bhp_power > 0 && machine">
            <span>单份BHP参配算力</span>
            <span>
              <span v-if="machine">{{Number(machine.bhp_power)}}{{machine.unit_name}}</span>
            </span>
          </p>
          <p>
            <span>分币比例</span>
            <span>
              <span v-if="machine">{{this.accMul(machine.distribution_rate , 100)}}%</span>
            </span>
          </p>
          <p>
            <span>剩余算力</span>
            <span>
              <span v-if="machine">{{this.accMul(machine.productNum , machine.computing_power)}}</span>T
            </span>
          </p>
          <p>
            <span>合约有效期</span>
            <span><span v-if="machine">{{machine.constract_date_num}}</span>天</span>
          </p>
          <p v-if="machine && machine.type == 11">
            <span>合约电价</span>
            <span><span v-if="machine">{{Number(machine.electric_price.CNY)}}</span>CNY / 度</span>
          </p>
          <p>
            <span>预计每日产币</span>
            <span>
              <span v-if="machine">{{this.numSlice(machine.btcIncome , 8)}} BTC</span>
              <span v-if="machine && Number(machine.bhp_power) > 0" >/ {{this.numSlice(machine.bhpIncome , 4 )}} BHP</span>
            </span>
          </p>
        </div>
      </section>
      <section id="sec2">
        <img src="../../common/imgs/product.png" alt="">
        <span>加配算力宝,确保95%最低产出回报</span>
        <img src="../../common/imgs/gth_one.png" alt="" class="hoverhand" @click="showIntroduceDialog">
      </section>
<!--      <section id="sec3">-->
<!--        <p class="title textCenter">-->
<!--          <span>产出测算</span>-->
<!--        </p>-->
<!--        <div class="content">-->
<!--          <p>币价/{{machine.constract_date_num}}天产出率 (净产出预估)</p>-->
<!--          <p v-for="(item , index) in machine.predict_income_level">-->
<!--            <span class="left">{{Number(item.btc_price)}} CNY</span>-->
<!--            <span class="center">-->
<!--              <span class="width" :style="{ width : item.width }"></span>-->
<!--              <span>{{item.income_rate_100}}%</span>-->
<!--            </span>-->
<!--            <span class="right">({{Number(item.income)}} CNY)</span>-->
<!--          </p>-->
<!--          <p style="font-size: 0.18rem;padding-top: 0.05rem">历史最高币价</p>-->
<!--        </div>-->
<!--        <div class="bottom">-->
<!--          *基于-->
<!--          <span v-if="machine">-->
<!--          {{Number(machine.btcProduction)}} BTC/T <span v-if="machine.bhp_power && Number(machine.bhp_power) > 0">，{{Number(machine.bhpProduction)}} BHP/T</span>-->
<!--          </span>-->
<!--          计算,(BTC产量为人人矿场运营指数，BHP产量取自第三方平台BHPay，仅供参考)-->
<!--        </div>-->
<!--      </section>-->
      <section id="html" v-html="html"></section>
      <section id="submit">
        <router-link :to="{path: machine.type == 11 ? '/no_electric_power_pay' : '/need_electric_power_pay' , query:{machine:JSON.stringify(machine) , asset : JSON.stringify(asset)}}" class="sub yellowbtn">
          立即下单
        </router-link>
      </section>
    </div>
    <introduce-dialog ref="dl"></introduce-dialog>
  </div>
</template>
<script>
  import { getMachineDetail } from '../../http/api';
  export default {
    name : 'power_introduce',
    data(){
      return{
        introduce: '不包电矿机详情',
        contractDays : 180,
        html : '',
        dialogHtml : '',
        machine_id : '',
        machine : '',//矿机信息
        cnyPrice : '',
        usdtPrice:'',
        asset : '',//资产
      }
    },
    components:{
      introduceDialog : resolve => { require(['../../components/introduceDialog'], resolve) },
    },
    mounted() {
      let thiz = this, query = this.$route.query;
      thiz.machine_id = query.machine_id;
      thiz.usdtPrice = query.usdt;
      thiz.cnyPrice = query.cny;
      getMachineDetail({machine_id : thiz.machine_id}).then(res => {
        if(res.code == 200){
          let data = res.data;
          let machine = data.machine;
          let predict_income_level = machine.predict_income_level;
          let maxWidth = 0.5;//横线100%的宽度
          thiz.for( predict_income_level , function ( item , index ) {
            item.income_rate = item.income_rate < 0 ? 0 : item.income_rate;
            item.income_rate_100 = thiz.numSlice(thiz.accMul(item.income_rate , 100) , 2);
            item.width = thiz.numSlice(thiz.accMul(maxWidth , item.income_rate) , 2) + 'rem';
          });
          machine.predict_income_level = predict_income_level;
          thiz.machine =machine;
          thiz.asset = data.asset;
          thiz.html = thiz.machine.desc;
        }
      })
    },
    methods:{
      showIntroduceDialog(){
        let thiz = this;
        this.$refs.dl.dialogShow();
      }
    }
  }
</script>
<style lang="less" type="text/less" scoped>
  #views{
    padding-bottom: 1.7rem;
  }
  .topBg{
    background-color: #FAE9BB;
    background-image: linear-gradient(to right, #FAE9BB , #FDF8E5);
    height: 3rem;
  }
  #views>.content{
    padding:0 0.28rem;margin-top: -2.5rem;
    .machineName{
      font-size: 0.36rem;padding: 0.25rem 0;position: relative;padding-left: 0rem;
      img{
        font-size: 0;height: 0.32rem;z-index: 1;left: 0;top:50%;
      }
    }
    >section{
      border-radius: 0.06rem;background: #fff;
    }
    #sec1{
      padding: 0 0.34rem;
      .allType{
        padding: 0.36rem 0;overflow: hidden;
        >img,>span{
          display: inline-block;float: left;height: 0.34rem;
        }
        >span{
          background: #FDF8EC;line-height: 0.34rem;padding: 0 0.13rem;margin-left: 0.1rem;color: #D89005;font-size: 0.22rem;
        }
      }
      .sec1_content{
        p{
          overflow: hidden;padding-bottom: 0.3rem;
          >span{
            color: #898989;font-size: 0.28rem;
          }
          >span:last-child{
            float: right;color: #262626;
          }
        }
        >p:first-child{
          >span:last-child{
            color: #F67311;
            >span>span{
              font-size: 0.2rem;
            }
          }
        }
      }
    }
    #sec2{
      padding: 0.36rem;margin-top: 0.2rem;position: relative;font-size: 0.28rem;overflow: hidden;
      >span{
        float: left;padding-left: 0.55rem;
      }
      >img:first-child{
        width: 0.5rem;float: left;position: absolute;z-index: 1;left: 0.36rem;top:50%;margin-top: -0.25rem;
      }
      >img:last-child{
        width: 0.28rem;float: left;margin-left: 0.05rem;
      }
    }
    #sec3{
      margin-top: 0.2rem;padding: 0 0.34rem;padding-bottom: 0.3rem;
      >.title{
        font-size: 0.3rem;
        >span{
          padding: 0.3rem 0;position: relative;display: inline-block;
        }
        >span:before{
          content: '';display: block;width: 0.46rem;height: 0.16rem;position: absolute;z-index: 1;
          background: url("../../common/imgs/titleflower.png") center center no-repeat;background-size: 100% 100%;left: -100%;
          top:50%;margin-top: -0.08rem;
        }
        >span:after{
          content: '';display: block;width: 0.46rem;height: 0.16rem;position: absolute;z-index: 1;
          background: url("../../common/imgs/titleflower.png") center center no-repeat;background-size: 100% 100%;right: -100%;
          top:50%;margin-top: -0.08rem;
        }
      }
      >.content{
        background: #FAFAFA;border-radius: 0.04rem;padding: 0 0.29rem;font-size: 0.24rem;color: #898989;padding-bottom: 0.28rem;
        >p{
          padding-top: 0.26rem;overflow: hidden;
          >span{
            display: inline-block;float: left;line-height: 0.28rem;
          }
          >.left{
            width:2rem;
          }
          >.center{
            color: #F44E27;height: 0.28rem;line-height: 0.28rem;overflow: hidden;
            >span{
              line-height: 0.28rem;float: left;
            }
            >.width{
              display: inline-block;height: 100%;background: #FFAB1A;margin: 0 0.05rem;
            }
          }
        }
      }
      >.bottom{
        color: #B4B4B4;font-size: 0.22rem;padding-top: 0.17rem;line-height: 130%;
        >span{
          color: #262626;
        }
      }
    }
    #html{
      margin-top: 0.2rem;padding: 0.3rem;padding-top: 0;
      /deep/ img{
        width: 100%;
      }
    }
    #submit{
      padding: 0.3rem 0.28rem;padding-top:0rem;background: #f8f8f8;position: fixed;bottom: 0;width: 100%;left: 0;
      >a{
        border-radius: 0.04rem;margin: 0;line-height: 0.88rem;
      }
    }
    @media screen and (min-width: 1025px) {
      #submit{
        width: 600px;left: 50%;margin-left: -300px;
      }
    }
  }
</style>
